<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/cookie.js"></script>
</head>

<body>
    <button class="set">新增</button>
    <button class="get">获取</button>
</body>
<script>
    // 使用cookie需要注意的问题?
    // 1. 有些浏览器在使用中文时，会出现乱码。
    //    在设置cookie时，通过encodeURIComponent 编码，在获取cookie时，通过decodeURIComponent 解码
    // 2.   cookie 的内容是纯文本，即只能保存字符串数据。 如果存储其他类型的数据会隐式转字符串
    // 此时如果向存储数组和对象等复杂类型的数据 => 需要在设置Cookie时通过JSON.stringify() 转化为json字符串
    // 3. cookie存储在用户本地
    // 4. cookie不能跨浏览器
    // 5. cookie不能跨网站
    // 6. cookie 依赖于服务器环境 ，即设置和获取cookie时，要用 http / https 访问网页。火狐除外。 


    var set = document.getElementsByClassName("set")[0];
    var get = document.getElementsByClassName("get")[0];

    set.onclick = function () {

        // 中文
        // var user = "张三";
        // setCookie("user", encodeURIComponent(user), 7);

        var arr = [1, 2, 3, 4];
        var obj = { a: 1, b: 2, c: 3 }

        setCookie("arr", JSON.stringify(arr));
        setCookie("obj", JSON.stringify(obj));

    }


    get.onclick = function () {
        // 中文
        // var enStr = getCookie("user");
        // var user = decodeURIComponent(enStr);
        // console.log(user);

        var arrStr = getCookie("arr");
        var objStr = getCookie("obj");

        var arr = JSON.parse(arrStr);
        var obj = JSON.parse(objStr);
        console.log(arr, obj);
    }






</script>

</html>